<template>
  <van-tabbar v-model="active"  active-color="#ff4444" inactive-color="#666666">
    <van-tabbar-item icon="wap-home-o" name="/redwine/home" replace to="/redwine/home">首页</van-tabbar-item>
    <van-tabbar-item icon="label-o" name="/redwine/category" replace to="/redwine/category">分类</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" :badge="num" name="/redwine/cart" replace to="/redwine/cart">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-circle-o" name="/redwine/user" replace to="/redwine/user">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import Vue from "vue";
import { getCartList } from "@/api/cart.js";
import { Tabbar, TabbarItem } from "vant";

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  data() {
    return {
        active: "/redwine/home",
        num:null
    };
  },
 async created() {
 //获取购物车数据
      let rs = await getCartList({});
      this.num = rs.data.length;
      if(this.num===0){
          this.num = null
      }
      
  },
  mounted(){
    this.active=this.$route.meta.path
  },
  computed: {},
  methods: {},
};
</script>

<style lang="stylus" scoped></style>
